<template>
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  <el-upload
    class="upload-demo"
    ref="upload"
    :multiple="true"
    :action="'http://up.qiniup.com/'"
    :data="postData"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :on-success="uploadSuccess"
    name="file"
    :before-upload="beforeUploadGetKey"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="test">测试</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="test2">测试</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，{{postData}}且不超过500kb</div>
  </el-upload>
  </el-form>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data() {
    return {
      postData:{
        token:"",
        key:""
      },
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  created(){
  },
  methods: {
    uploadSuccess(file,fileList,response){
      console.log(file, fileList,response);
    },
    submitUpload(file,fileList) {
      this.$refs.upload.submit();
    },
    async beforeUploadGetKey(file){
      var tokenUrl = "/api/upload/oss/qiniu/getUploaderInfo"
      await axios({
        method: 'post',
        url:tokenUrl,
        headers:{"Authorization":"eyJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1NDIxOTM0NjQsImlzcyI6Ind3dy5odWl6aGl5dW4uY29tIiwidXNlcklkIjoiMTAzNTA3MjE2MTA0OTcyMjg4MSIsInNlY3JldCI6IjQ1YjY3Yjc0ZDU3OWEyZTI4ZDIwZWZmMzM2Y2RjYTBlY2Y1MDUxNjIifQ.BWzatNQx6H0VswofY7Ws4gr-l_MFSdgHNGWiZYGI8b0"},
        data:qs.stringify({type:"Videos",fileName:file.name})
      }).then(response => {
        this.postData = response.data;

      }).catch(err=>{
        console.log("234234234")
      })
    },
    async test(){
      var tokenUrl = "http://localhost:8084/stu/login"
      await axios.get("http://localhost:8084/stu/login",{data:qs.stringify({phone:"13165966720",password:'123456'})}).then(response => {
        this.postData = response.data;

      }).catch(err=>{
        console.log("234234234")
      })
    },
    async test2(){
      var tokenUrl = "http://zhaixiang.s1.natapp.cc/stu/info/retrievedPassword"
      await axios({
        method: 'post',
        url: tokenUrl,
        data: qs.stringify({phone: "13165966720", verifyCode: "399605", password: "123456", confirmPassword: "123456"})
      }).then(response => {
        this.postData = response.data;

      }).catch(err=>{
        console.log("234234234")
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(this.token)
      console.log(file);
    }
  }
}
</script>

<style scoped>

</style>
